import React, { Component } from "react";
import { NavBar, Icon } from 'antd-mobile';
import { Grid } from 'antd-mobile';

const genre = [
    '白酒', '银行', '煤炭', '大消费', '自然资源', '有色金属', '钢铁', '上证50', '富时中国', '医药', '大宗商品', '中证100',
    '一带一路', '央视50', '国企改革', '家用电器', '沪深300', '农业', '地产', '中证红利', 'MSCI', '高铁产业', '养老产业', '基建',
    '中小板', '中证500', '深成指数', '证券保险', '中证1000', '恒生指数', '创业板', '国防军工', '新能源', '传媒', '环保', '工业4.0',
    '人工智能', 'TMT', '大数据'
]
const icon = [
    require('../../imgs/theme1.png'), require('../../imgs/theme2.png'), require('../../imgs/theme3.png'),
    require('../../imgs/theme4.png'), require('../../imgs/theme5.png'), require('../../imgs/theme6.png'),
    require('../../imgs/theme7.png'), require('../../imgs/theme8.png'), require('../../imgs/theme9.png'),
    require('../../imgs/theme10.png'), require('../../imgs/theme11.png'), require('../../imgs/theme12.png'),
    require('../../imgs/theme13.png'), require('../../imgs/theme14.png'), require('../../imgs/theme15.png'),
    require('../../imgs/theme16.png'), require('../../imgs/theme17.png'), require('../../imgs/theme18.png'),
    require('../../imgs/theme19.png'), require('../../imgs/theme20.png'), require('../../imgs/theme21.png'),
    require('../../imgs/theme22.png'), require('../../imgs/theme23.png'), require('../../imgs/theme24.png'),
    require('../../imgs/theme25.png'), require('../../imgs/theme26.png'), require('../../imgs/theme27.png'),
    require('../../imgs/theme28.png'), require('../../imgs/theme29.png'), require('../../imgs/theme30.png'),
    require('../../imgs/theme31.png'), require('../../imgs/theme32.png'), require('../../imgs/theme33.png'),
    require('../../imgs/theme34.png'), require('../../imgs/theme35.png'), require('../../imgs/theme36.png'),
    require('../../imgs/theme37.png'), require('../../imgs/theme38.png'), require('../../imgs/theme39.png')
]

const data = Array.from(new Array(39)).map((_val, i) => ({
    icon: icon[i],
    text: genre[i],
}));

export default class FundTheme extends Component {
    render() {
        return (
            <div className="fundTheme-div" style={{height:'91vh',overflowY:'scroll'}}>
                <div>
                    <NavBar className="f_r_nav"
                            mode="light"
                            leftContent={[
                                <Icon type="left" />,
                                "返回",
                            ]}
                            onLeftClick={
                                () =>
                                    window.location.href = '#/terran/fund'
                            }
                            rightContent={[
                                <Icon key="0" type="search"  />,
                            ]}
                    >主题选基</NavBar>
                </div>

                <div className='fundTheme-div-sub'>
                    <div className="sub-title">&nbsp;</div>
                    <Grid data={data} columnNum={3} onClick={_el => console.log(_el)} />
                </div>
            </div>
        );
    }
}